<html>
    <head>
        <script src="js/snowstorm/snowstorm-min.js"></script>
        <title>Fahion shop</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <link href="css/style.css" type="text/css" rel="stylesheet"/>
        <link href="css/Introduction.css" type="text/css" rel="stylesheet"/>
        <script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.js"></script>
    </head>
    <body>
        <div id="wrapper">
            <?php include 'template/header.php' ?>
            <div id="Introduction">
                <div id="content">
                    <script type="text/javascript">

                        /******************************************
                         * Snow Effect Script- By Altan d.o.o. (http://www.altan.hr/snow/index.html)
                         * Visit Dynamic Drive DHTML code library (http://www.dynamicdrive.com/) for full source code
                         * Last updated Nov 9th, 05' by DD. This notice must stay intact for use
                         ******************************************/
						  
                        //Configure below to change URL path to the snow image
                        var snowsrc="images/interface/snow.gif"
                        // Cấu hình dưới đây để thay đổi số lượng tuyết Rende
                        var no = 15;
                        //Cấu hình có tuyết sẽ biến mất sau khi x giây (0 = không bao giờ):
                        var hidesnowtime = 0;
                        // Cấu hình bao nhiêu tuyết trước khi mờ dần sẽ thả xuống ("windowheight" hoặc "pageheight")
                        var snowdistance = "pageheight";

                        ///////////Stop Config//////////////////////////////////

                        var ie4up = (document.all) ? 1 : 0;//Để thay đổi thuộc tính của một phần tử HTML nào đó trong trang bằng lệnh JavaScript
                        var ns6up = (document.getElementById&&!document.all) ? 1 : 0;

                        function iecompattest(){
                            return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
                        }

                        var dx, xp, yp;    // phối hợp và các biến vị trí
                        var am, stx, sty;  // biên độ và bước biến
                        var i, doc_width =790, doc_height = 830; 
						  
                        if (ns6up) {
                            doc_width = self.innerWidth;
                            doc_height = self.innerHeight;
                        } else if (ie4up) {
                            doc_width = iecompattest().clientWidth;
                            doc_height = iecompattest().clientHeight;
                        }

                        dx = new Array();
                        xp = new Array();
                        yp = new Array();
                        am = new Array();
                        stx = new Array();
                        sty = new Array();
                        snowsrc=(snowsrc.indexOf("dynamicdrive.com")!=-1)? "snow.gif" : snowsrc
                        for (i = 0; i < no; ++ i) {  
                            dx[i] = 0;                        //thiết phối hợp các biến
                            xp[i] = Math.random()*(doc_width-550);  // set position variables
                            yp[i] = Math.random()*doc_height;
                            am[i] = Math.random()*20;         // set amplitude variables
                            stx[i] = 0.02 + Math.random()/10; // set step variables
                            sty[i] = 0.7 + Math.random();     // set step variables
                            if (ie4up||ns6up) {
                                if (i == 0) {
                                    document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><a href=\"http://dynamicdrive.com\"><img src='"+snowsrc+"' border=\"0\"><\/a><\/div>");
                                } else {
                                    document.write("<div id=\"dot"+ i +"\" style=\"POSITION: absolute; Z-INDEX: "+ i +"; VISIBILITY: visible; TOP: 15px; LEFT: 15px;\"><img src='"+snowsrc+"' border=\"0\"><\/div>");
                                }
                            }
                        }

                        function snowIE_NS6() {  // IE and NS6 main animation function
                            doc_width = ns6up?window.innerWidth-10 : iecompattest().clientWidth-10;
                            doc_height=(window.innerHeight && snowdistance=="windowheight")? window.innerHeight : (ie4up && snowdistance=="windowheight")?  iecompattest().clientHeight : (ie4up && !window.opera && snowdistance=="pageheight")? iecompattest().scrollHeight : iecompattest().offsetHeight;
                            for (i = 0; i < no; ++ i) {  // iterate for every dot
                                yp[i] += sty[i];
                                if (yp[i] > doc_height-50) {
                                    xp[i] = Math.random()*(doc_width-am[i]-30);
                                    yp[i] = 0;
                                    stx[i] = 0.02 + Math.random()/10;
                                    sty[i] = 0.7 + Math.random();
                                }
                                dx[i] += stx[i];
                                document.getElementById("dot"+i).style.top=yp[i]+"px";
                                document.getElementById("dot"+i).style.left=xp[i] + am[i]*Math.sin(dx[i])+"px";  
                            }
                            snowtimer=setTimeout("snowIE_NS6()", 10);
                        }

                        function hidesnow(){
                            if (window.snowtimer) clearTimeout(snowtimer)
                            for (i=0; i<no; i++) document.getElementById("dot"+i).style.visibility="hidden"
                        }
								

                        if (ie4up||ns6up){
                            snowIE_NS6();
                            if (hidesnowtime>0)
                                setTimeout("hidesnow()", hidesnowtime*1000)
                        }

                    </script>
                    <form action="#" method="post">

                        <p> Fahion shop -Thời trang là không giới hạn.<br>

                            &nbsp;&nbsp;&nbsp;Từ trước tới nay, các thương hiệu thời trang ra đời đa số đều dành cho các tầng lớp thượng lưu.
                            Và đối với chúng ta, nó luôn có một giới hạn nhất định. 
                            Vì vậy để sắm cho mình một bộ cánh chất lượng và hợp thời trang chúng ta phải bỏ ra một số tiền không hề nhỏ.
                            Nhất là đối với giới trẻ, thời trang luôn biến đổi không ngừng. 
                            Hiểu được điều đó, Fahion ra đời và đang dần hoàn thiện để đưa tới các bạn trẻ những mẫu thiết 
                            kế hợp thời trang nhất, chất lượng tốt nhất mà giá cả thì cực kì hợp lý. 
                            &nbsp;&nbsp;&nbsp;Đến với Fahion,sẽ không còn giới hạn nào cho bạn. 
                            Fahion đang và sẽ tiếp tục hướng tới chất lượng hơn nữa, rất mong các bạn bỏ qua những điều thiếu sót của 
                            Fahion trong thời gian vừa qua và cùng chung tay góp ý để Fahion ngày càng hoàn thiện hơn.
                            <BR>
                            Địa chỉ: lê văn lương-Hà nội.


                        </p>

                    </form>
                </div>
                <div id="images">
                    <div id="shop">
                        <div id='body'>

                            <div id="bigPic">
                                <img src="public/templates/admin/images/shop/1.jpg" alt="1" />
                                <img src="public/templates/admin/images/shop/2.jpg" alt="2" />
                                <img src="public/templates/admin/images/shop/3.jpg" alt="3" />
                                <img src="public/templates/admin/images/shop/4.jpg" alt="" />
                                <img src="public/templates/admin/images/shop/5.jpg" alt="" />
                            </div>


                            <ul id="thumbs">
                                <li class='active' rel='1'><img src="public/templates/admin/images/shop/1_1.jpg" alt="" /></li>
                                <li rel='2'><img src="public/templates/admin/images/shop/2_1.jpg" alt="1" /></li>
                                <li rel='3'><img src="public/templates/admin/images/shop/3_1.jpg" alt="4" /></li>
                                <li rel='4'><img src="public/templates/admin/images/shop/4_1.jpg" alt="2" /></li>
                                <li rel='4'><img src="public/templates/admin/images/shop/5_1.jpg" alt="2" /></li>
                            </ul>

                        </div>
                        <script type="text/javascript">
                            var currentImage;
                            var currentIndex = -1;
                            var interval;
                            function showImage(index){
                                if(index < $('#bigPic img').length){
                                    var indexImage = $('#bigPic img')[index]
                                    if(currentImage){   
                                        if(currentImage != indexImage ){
                                            $(currentImage).css('z-index',2);
                                            clearTimeout(myTimer);
                                            $(currentImage).fadeOut(250, function() {
                                                myTimer = setTimeout("showNext()", 3000);
                                                $(this).css({'display':'none','z-index':1})
                                            });
                                        }
                                    }
                                    $(indexImage).css({'display':'block', 'opacity':1});
                                    currentImage = indexImage;
                                    currentIndex = index;
                                    $('#thumbs li').removeClass('active');
                                    $($('#thumbs li')[index]).addClass('active');
                                }
                            }
							
                            function showNext(){
                                var len = $('#bigPic img').length;
                                var next = currentIndex < (len-1) ? currentIndex + 1 : 0;
                                showImage(next);
                            }
							
                            var myTimer;
							
                            $(document).ready(function() {
                                myTimer = setTimeout("showNext()", 3000);
                                showNext(); //loads first image
                                $('#thumbs li').bind('click',function(e){
                                    var count = $(this).attr('rel');
                                    showImage(parseInt(count)-1);
                                });
                            });
							
							
                        </script>	
                    </div>
                    <div id="map">
                        <iframe  src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d3724.8143925599647!2d105.8023827!3d21.000076!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0xd94c7af70bcb2829!2zVHJ1bmcgdMOibSDEkMOgbyB04bqhbyBDTlRUIE5JSVQtSUNUIEjDoCBO4buZaQ!5e0!3m2!1svi!2s!4v1397547927589" width="600" height="450" frameborder="0" style="border:0">
                        </iframe>
                    </div>
                </div>
            </div>

            <?php include 'template/footer.php' ?>
        </div>
    </body>
</html>